Google Charts-এ চার্টের Gridlines (গ্রিডলাইন) এবং Background Colors (পটভূমির রঙ) কাস্টমাইজ করা যায়, যা চার্টের ভিজ্যুয়াল উপস্থাপনাকে আরও আকর্ষণীয় এবং স্পষ্ট করে তোলে। এখানে আমরা কীভাবে গ্রিডলাইন এবং পটভূমির রঙ পরিবর্তন করা যায়, তা আলোচনা করব।
Gridlines পরিবর্তন
Gridlines চার্টের অক্ষের জন্য অনুভূমিক এবং উল্লম্ব রেখা হিসেবে কাজ করে, যা ডেটার মধ্যে তুলনা এবং সম্পর্ক তৈরি করতে সাহায্য করে। Google Charts-এ আপনি Gridlines এর রঙ, প্রস্থ এবং সংখ্যা কাস্টমাইজ করতে পারেন।
১. Gridlines কাস্টমাইজ করা
আপনি hAxis (Horizontal Axis) এবং vAxis (Vertical Axis) এর গ্রিডলাইন কাস্টমাইজ করতে পারেন। gridlines এবং minorGridlines অপশনগুলির মাধ্যমে এগুলির রঙ এবং সংখ্যা নির্ধারণ করা যায়।
var options = {
hAxis: {
title: 'Year',
gridlines: { color: '#e0e0e0', count: 5 } // গ্রিডলাইন রঙ এবং সংখ্যা কাস্টমাইজ করা
},
vAxis: {
title: 'Sales',
gridlines: { color: '#f1f1f1', count: 6 }, // গ্রিডলাইন রঙ এবং সংখ্যা কাস্টমাইজ করা
minorGridlines: { color: '#d3d3d3' } // মাইনর গ্রিডলাইন রঙ কাস্টমাইজ করা
}
};
color: গ্রিডলাইন রঙ সেট করার জন্য ব্যবহৃত হয়।count: গ্রিডলাইনের সংখ্যা সেট করতে ব্যবহার করা হয়।minorGridlines: মাইনর গ্রিডলাইন কাস্টমাইজ করার জন্য ব্যবহার করা হয় (ছোট গ্রিডলাইন)।
২. Gridlines এর জন্য কাস্টম প্রস্থ
আপনি গ্রিডলাইনের প্রস্থও কাস্টমাইজ করতে পারেন, যা চার্টের দৃশ্যমানতা এবং স্পষ্টতা বাড়ায়।
var options = {
hAxis: {
gridlines: { color: '#e0e0e0', count: 5, lineWidth: 2 } // গ্রিডলাইন প্রস্থ কাস্টমাইজ করা
},
vAxis: {
gridlines: { color: '#f1f1f1', count: 6, lineWidth: 1 }
}
};
lineWidth: গ্রিডলাইন প্রস্থ পরিবর্তন করতে ব্যবহৃত হয়।
Background Colors পরিবর্তন
Google Charts-এ আপনি চার্টের পটভূমি রঙ কাস্টমাইজ করতে পারেন। এটি চার্টের মোট পরিবেশ এবং উপস্থাপনাকে আরও মানানসই করে তোলে।
১. Chart Area Background Color
চার্টের পটভূমি রঙ পরিবর্তন করতে backgroundColor অপশন ব্যবহার করা হয়। এটি চার্টের সম্পূর্ণ পটভূমি রঙ পরিবর্তন করে।
var options = {
backgroundColor: '#f5f5f5' // চার্টের পটভূমির রঙ পরিবর্তন করা
};
২. Plot Area Background Color
চার্টের ডেটা প্রদর্শনের এলাকার পটভূমি রঙ পরিবর্তন করতে chartArea অপশন ব্যবহার করা হয়।
var options = {
chartArea: {
backgroundColor: '#e0e0e0' // ডেটার প্লট এরিয়া পটভূমির রঙ
}
};
৩. Legend Background Color
চার্টের লেজেন্ডের পটভূমি রঙও কাস্টমাইজ করা যায়, যা চার্টের ডেটা সিরিজের জন্য মিথ্যা বা সঠিক রঙ দেখাতে সাহায্য করে।
var options = {
legend: { position: 'bottom', textStyle: { color: '#000', fontSize: 14 }, backgroundColor: '#f0f0f0' } // লেজেন্ডের পটভূমির রঙ
};
৪. Title Background Color
চার্টের শিরোনামের পটভূমি রঙ পরিবর্তন করতে titleTextStyle অপশন ব্যবহার করা হয়।
var options = {
title: 'Company Performance',
titleTextStyle: {
color: '#ff5733', // শিরোনামের রঙ
fontSize: 20,
bold: true
}
};
উদাহরণ: Gridlines এবং Background Color পরিবর্তন
এখন, আসুন একটি সম্পূর্ণ উদাহরণ দেখি যেখানে আমরা গ্রিডলাইন এবং পটভূমি রঙ পরিবর্তন করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Charts - Gridlines and Background Color</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2019', 1000],
['2020', 1170],
['2021', 660],
['2022', 1030]
]);
var options = {
title: 'Company Sales Over the Years',
backgroundColor: '#f5f5f5', // চার্টের পটভূমি রঙ
hAxis: {
title: 'Year',
gridlines: { color: '#e0e0e0', count: 5, lineWidth: 2 } // গ্রিডলাইন কাস্টমাইজেশন
},
vAxis: {
title: 'Sales',
gridlines: { color: '#f1f1f1', count: 6, lineWidth: 1 },
minorGridlines: { color: '#d3d3d3' }
},
chartArea: {
backgroundColor: '#e0e0e0' // ডেটা প্লট এরিয়া পটভূমির রঙ
}
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Charts - Gridlines and Background Color</h2>
<div id="line_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
উপসংহার
Google Charts-এ Gridlines এবং Background Colors পরিবর্তন করার মাধ্যমে আপনি আপনার চার্টের ভিজ্যুয়াল উপস্থাপনাকে আরও স্পষ্ট, সুন্দর এবং প্রফেশনাল করতে পারেন। গ্রিডলাইন কাস্টমাইজেশন দ্বারা ডেটার তুলনা সহজ হয় এবং পটভূমির রঙ পরিবর্তন করে চার্টের দৃষ্টিনন্দনতা বৃদ্ধি পায়।
Read more
